<%-- 
    Document   : index
    Created on : Dec 12, 2013, 10:37:24 PM
    Author     : CHIP
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Survey</title>
    </head>
    <body>
        <div id="titleID">
            <div>Tựa đề survey:</div>
            <div>
                <input type="text" name="txtSurveyTitle" value="" /><br/></div>
        </div>
        <script type="text/javascript"src="js/validateQuestion.js"></script>
        <script>
            var count = 1;
            var check = true;
            function show(){
                if(check==true){
                    document.getElementById("areaQuestion").style.border = "2px solid #52CC52";
                    document.getElementById("areaQuestion").style.width = "410px";
                    document.getElementById("areaQuestion").style.height = "100px";
                    document.getElementById("subComment").style.opacity = "1";
                    check = false;
                }else{
                    document.getElementById("areaQuestion").style.border = "2px solid #CCCCCC";
                    document.getElementById("areaQuestion").style.width = "300px";
                    document.getElementById("areaQuestion").style.height = "40px";
                    document.getElementById("subComment").style.opacity = "0";
                    check = true;
                }
            }
            function addAnswer(divID){
//                                alert("click toi day"+ divID);
                var p = document.createElement("p");
                p.setAttribute("id", "ans");
                //                alert("click toi set");
                p.innerHTML="<input type='text' id='txtAnswer' name='txtName' placeholder='Nội dung câu trả lời' style='width: 875px' /> <br/>";
                var pa = document.getElementById(divID);
                pa.appendChild(p);
            }
            function addQuestion(){
                count++;
                var ans = "answer"+ count;
                var div = document.createElement("div");
                div.setAttribute("id", "question"+count);
                div.innerHTML="<div>Câu hỏi "+count+" :<span id='questionStatus'></span></div>"+
                "<textarea onclick='return show();' style='transition:width 1s, height 1s, transform 0.7s; width: 900px; height: 50px' id='areaQuestion' name='txtComment' placeholder='Nội dung câu hỏi'></textarea>" +
                "<div>Câu trả lời:<span id='answerStatus'></span></div>"+
                "<div id='answer"+count+"'>                    <input type='text' id='txtAnswer' name='txtName' placeholder='Nội dung câu trả lời' style='width: 875px' /><input type='submit' value='+' onclick='addAnswer("+ans.toString()+")'/> <br/>"+
                    "<input type='hidden' id='txtInfoId' value='${param.id}'/>"+

                "</div> <input style='width: 203px;' onclick='addQuestion()' type='button' name='' value='thêm câu hỏi' />";
            var pa = document.getElementById("mainSurvey");
            pa.appendChild(div);
            }
           
        </script>


        <div id="mainSurvey">
            <div id="question">
                <div>Câu hỏi 1:<span id="questionStatus"></span></div>
                <textarea onclick="return show();" style="transition:width 1s, height 1s, transform 0.7s; width: 900px; height: 50px" id="areaQuestion" name="txtComment" placeholder="Nội dung câu hỏi"></textarea>
                <div>Câu trả lời:<span id="answerStatus"></span></div>
                <div id="answer">
                    <input type="text" id="txtAnswer" name="txtName" placeholder="Nội dung câu trả lời" style="width: 875px" /> <input type="submit" value="+" onclick="addAnswer('answer')"/> <br/>
                    <input type="hidden" id="txtInfoId" value="${param.id}"/>

                </div>
                <input style="width: 203px;" onclick="addQuestion()" type="button" name="" value="thêm câu hỏi" />
            </div>
            <!-- Load comment -->
            <x:transform xml="${xmlComment}" xslt="${xsltComment}">
                <x:param name="id" value="${param.id}"/>
            </x:transform>
            <!-- End Load comment -->
        </div>
    </body>
</html>
